import React, { Component } from 'react'
import { Icon, Breadcrumb } from 'antd'
import { LineChart, AgreementEditPage, ChatRoomUser, ChatMessage, UserDetail, BodyDynamicContent, SiderMenu } from './'

export default class DashboardBody extends Component {
  constructor() {
    super()
    this.state = {
      /** 一级菜单，可提供的值
        register-agreement // 注册协议
        chat-room ／／ 聊天室
      */
      concreteFunc: 'customer', // 一级菜单
      /** 二级菜单，可提供的值
        im-user // IM用户
        msg // 消息
        statistical-data // 统计数据
        set-up // 设置
      */
      subMenuTitle: '', // 二级菜单
      chatRootMenu: false,
    }
  }
  render() {
    const { concreteFunc, chatRootMenu, subMenuTitle } = this.state
    return (
      <div className="rt-dashboard-body">
        <div className="rt-sidebar">
          <SiderMenu />
        {/*
          <div
            className={`rt-sidebar-text ${concreteFunc === 'dashboard' ? 'rt-left-border-bg' : ''}`}
            onClick={() => {
              if (concreteFunc === 'dashboard') return
              this.setState({
                concreteFunc: 'dashboard',
              })
            }}
          >
            {
              concreteFunc === 'dashboard'
              ? <Icon type="caret-right" />
              : null
            }
            <i className="iconfont icon-agreement"></i>
            <span className="rt-text-right">仪表盘</span>
          </div>
          <div
            className={`rt-sidebar-text rt-sidebar-text-selected ${(concreteFunc === 'customer' && subMenuTitle === '') ? 'rt-left-border-bg' : ''}`}
            onClick={() => {
              // if (concreteFunc === 'customer') return
              this.setState({
                concreteFunc: 'customer',
                chatRootMenu: !chatRootMenu,
                subMenuTitle: '',
              })
            }}
          >
            {
              concreteFunc === 'customer' && subMenuTitle === ''
              ? <Icon type="caret-right" />
              : null
            }
            <i className="iconfont icon-chat"></i>
            <span className="rt-text-right">客户</span>
            {
              chatRootMenu
              ?
              (
                <span className="rt-icon-box">
                  <span className="rt-white-circle"></span>
                </span>
              )
              : null
            }
            {
              (concreteFunc === 'customer') && !chatRootMenu
              ?
              (
                <span className="rt-icon-box">
                  <span className="rt-white-circle"></span>
                  <span className="rt-white-rectangle"></span>
                  <span className="rt-white-circle"></span>
                </span>
              )
              : null
            }
          </div>

          {
            (!chatRootMenu && concreteFunc === 'customer')
            ?
            (
              <div className="rt-chat-room-box">
                <div
                  className={`rt-sidebar-text rt-sub-text ${subMenuTitle === 'im-user' ? 'rt-left-border-bg' : ''}`}
                  onClick={() => {
                    if (subMenuTitle === 'im-user') return
                    this.setState({
                      subMenuTitle: 'im-user'
                    })
                  }}
                >
                  {
                    subMenuTitle === 'im-user'
                    ? <Icon type="caret-right" />
                    : null
                  }
                  <i className="iconfont icon-user"></i>
                  <span className="rt-text-right">潜在学员</span>
                </div>
                <div
                  className={`rt-sidebar-text rt-sub-text ${subMenuTitle === 'msg' ? 'rt-left-border-bg' : ''}`}
                  onClick={() => {
                    if (subMenuTitle === 'msg') return
                    this.setState({
                      subMenuTitle: 'msg',
                    })
                  }}
                >
                  {
                    subMenuTitle === 'msg'
                    ? <Icon type="caret-right" />
                    : null
                  }
                  <i className="iconfont icon-message"></i>
                  <span className="rt-text-right">意向学员</span>
                </div>
                <div
                  className={`rt-sidebar-text rt-sub-text ${subMenuTitle === 'statistical-data' ? 'rt-left-border-bg' : ''}`}
                  onClick={() => {
                    if (subMenuTitle === 'statistical-data') return
                    this.setState({
                      subMenuTitle: 'statistical-data',
                    })
                  }}
                >
                  {
                    subMenuTitle === 'statistical-data'
                    ? <Icon type="caret-right" />
                    : null
                  }
                  <i className="iconfont icon-statistics"></i>
                  <span className="rt-text-right">正式学员</span>
                </div>
                {/*<div
                  className={`rt-sidebar-text rt-sub-text ${subMenuTitle === 'set-up' ? 'rt-left-border-bg' : ''}`}
                  onClick={() => {
                    if (subMenuTitle === 'set-up') return
                    this.setState({
                      subMenuTitle: 'set-up',
                    })
                  }}
                >
                  {
                    subMenuTitle === 'set-up'
                    ? <Icon type="caret-right" />
                    : null
                  }
                  <i className="iconfont icon-setting"></i>
                  <span className="rt-text-right">设置</span>
                </div>
              </div>
            )
            : null
          }

          <div
            className={`rt-sidebar-text`}
            onClick={() => {
              this.setState({
                concreteFunc: 'course',
              })
            }}
          >
            <i className="iconfont icon-agreement"></i>
            <span className="rt-text-right">课程</span>
          </div>
          <div
            className={`rt-sidebar-text`}
            onClick={() => {
              this.setState({
                concreteFunc: 'class',
              })
            }}
          >
            <i className="iconfont icon-agreement"></i>
            <span className="rt-text-right">班级</span>
          </div>
          <div
            className={`rt-sidebar-text`}
            onClick={() => {
              this.setState({
                concreteFunc: 'finance',
              })
            }}
          >
            <i className="iconfont icon-agreement"></i>
            <span className="rt-text-right">财务</span>
          </div>
          <div
            className={`rt-sidebar-text`}
            onClick={() => {
              this.setState({
                concreteFunc: 'experience',
              })
            }}
          >
            <i className="iconfont icon-agreement"></i>
            <span className="rt-text-right">体验</span>
          </div>

          <div className="rt-copyright">
            Powered by © Rootant 2016
          </div>
        
      */}
        </div>
        <div className="rt-vertical-placeholder"></div>

        <div className="rt-content">
          <div className="rt-banner">
            <img src="/images/corner.png" />
            <div className="rt-left">
              <Icon type="info" />
              {' '}
              <span>欢迎登录, 116804783@qq.com, 最后登录时间 2016年11月02日 13:28:47</span>
            </div>
            <div className="rt-right">
              <i className="iconfont icon-notice"></i>
              {' '}
              <span>最新通知：CRM管理系统升级版本，请尽快安排更新！</span>
            </div>
          </div>

          {
            concreteFunc === 'dashboard'
            ? (
              <div className="rt-statistical-data">
                <div className="rt-grid">
                  <div className="rt-text-box">
                    <div className="rt-text">客户转化率</div>
                  </div>
                  <div className="rt-icon-num">
                    <i className="iconfont icon-currentuser"></i>
                    <div className="rt-data-box">
                      <span>87.21</span>
                      <span>%</span>
                    </div>
                  </div>
                </div>

                <div className="rt-grid">
                  <div className="rt-text-box">
                    <div className="rt-text rt-bg-color-yellow">总学员数</div>
                  </div>
                  <div className="rt-icon-num">
                    <i className="iconfont icon-totaluser rt-color-yellow"></i>
                    <div className="rt-data-box">
                      <span className="rt-color-yellow">121,523</span>
                      <span className="rt-color-yellow">人</span>
                    </div>
                  </div>
                </div>

                <div className="rt-grid">
                  <div className="rt-text-box">
                    <div className="rt-text rt-bg-color-green">当月销售额</div>
                  </div>
                  <div className="rt-icon-num">
                    <i className="iconfont icon-totalmessage rt-color-green"></i>
                    <div className="rt-data-box">
                      <span className="rt-color-green">27,312,523</span>
                      <span className="rt-color-green">元</span>
                    </div>
                  </div>
                </div>

                <div className="rt-grid">
                  <div className="rt-text-box">
                    <div className="rt-text rt-bg-color-blue">消息数</div>
                  </div>
                  <div className="rt-icon-num">
                    <i className="iconfont icon-todaymessage rt-color-blue"></i>
                    <div className="rt-data-box">
                      <span className="rt-color-blue">54,567</span>
                      <span className="rt-color-blue">条</span>
                    </div>
                  </div>
                </div>
              </div>
            )
            : null
          }

          <BodyDynamicContent title={concreteFunc} subtitle={subMenuTitle} />

        </div>
      </div>
    )
  }
}